<nz-tabset [nzTabBarExtraContent]="extraTemplate">
  <nz-tab nzTitle="设备详情">

    <nz-collapse>
      <nz-collapse-panel nzHeader="基础信息" nzActive>
        <nz-list nzBordered>
          <nz-list-item><span>名称</span>{{data.name}}</nz-list-item>
          <nz-list-item>
            <span>产品</span>
            <a [routerLink]="'/admin/product/detail/'+data.product_id">{{data.product}}</a>
          </nz-list-item>
          <nz-list-item>
            <span>通道</span>
            <a [routerLink]="'/admin/tunnel/detail/'+data.tunnel_id">{{data.tunnel || data.tunnel_id}}</a>
          </nz-list-item>
          <nz-list-item><span>状态</span>{{data.running ? '启动' : '离线'}}</nz-list-item>
          <nz-list-item><span>禁用</span>
            <nz-switch [ngModel]="data.disabled" (ngModelChange)="onEnableChange($event)"></nz-switch>
          </nz-list-item>
          <nz-list-item><span>创建时间</span>{{data.created|dateString}}</nz-list-item>
        </nz-list>
      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="数据" nzActive>

        <div class="values" nz-row [nzGutter]="10">
          <div class="item" nz-col [nzSpan]="4" [nzXs]="12" [nzSm]="8" [nzMd]="6" [nzLg]="4" [nzXl]="3" [nzXXl]="2"
               *ngFor="let v of data.points">
            <nz-card>
              <div class="label">{{v.label}} <span *ngIf="v.unit">({{v.unit}})</span></div>
              <div class="value">{{context[v.name] | number: '1.0-' + v.precision}}</div>
              <div class="refresh" title="刷新" (click)="refresh(v.name)"><i nz-icon nzType="sync" nzTheme="outline"></i>
              </div>
              <div class="history" title="历史" [routerLink]="'/admin/device/value/'+data.id+'/'+v.name">
                <i nz-icon nzType="line-chart" nzTheme="outline"></i></div>
            </nz-card>
          </div>
        </div>

        <button nz-button nzType="primary" (click)="refreshAll()">刷新全部数据</button>

      </nz-collapse-panel>

      <nz-collapse-panel nzHeader="控制命令" nzActive>
        <div nz-row [nzGutter]="10">
          <div nz-col *ngFor="let cmd of data.commands" [nzSpan]="4" [nzXs]="12" [nzSm]="8" [nzMd]="6" [nzLg]="4"
               [nzXl]="3" [nzXXl]="2">
            <nz-card (click)="exec(cmd)">
              {{cmd.name}}
            </nz-card>
          </div>
        </div>

      </nz-collapse-panel>

    </nz-collapse>

  </nz-tab>
  <nz-tab nzTitle="组态" [nzDisabled]="!data.hmi">
    <ng-template nz-tab>
      <app-device-hmi [hmi]="data.hmi" [id]="id"></app-device-hmi>
    </ng-template>
  </nz-tab>
  <nz-tab nzTitle="告警记录">
    <ng-template nz-tab>
      <app-alarm type="device" [id]="id"></app-alarm>
    </ng-template>
  </nz-tab>
  <nz-tab nzTitle="日志">
    <ng-template nz-tab>
      <app-event type="device" [id]="id"></app-event>
    </ng-template>
  </nz-tab>

</nz-tabset>

<ng-template #extraTemplate>
  <a (click)="load()" title="刷新">
    <i nz-icon nzType="reload" [nzSpin]="loading"></i>
  </a>
  <nz-divider nzType="vertical"></nz-divider>
  <a title="原始数据" appViewConfig [config]="data">
    <i nz-icon nzType="profile"></i>
  </a>
  <nz-divider nzType="vertical"></nz-divider>
  <a title="编辑" [routerLink]="'/admin/device/edit/'+id">
    <i nz-icon nzType="form"></i>
  </a>
</ng-template>
